function $(id){
		return document.getElementById(id);
	}
				function animate(obj,target,step,speed){
			   clearInterval(obj.timer);
				var absStep = Math.abs(step);
				step = target > obj.offsetLeft ? absStep : -absStep;
				obj.timer = setInterval(function(){
					var distance = Math.abs(target - obj.offsetLeft);
					obj.style.left = obj.offsetLeft + step + 'px';
					if(distance < absStep){
						clearInterval(obj.timer);
						obj.style.left = target + 'px';
					}
				},speed);
			}
    window.onload = function(){
    	//0.动态创建导航部分
    var box = $('all');
    var ul = $('ul');
    var ol = document.createElement('ol');
    var imgCount = ul.getElementsByTagName('img').length;
    box.appendChild(ol);
    for(var i=0; i<imgCount;i++){
    	var li = document.createElement('li');
    	li.innerHTML = i + 1;
    	li.setAttribute('index',i);
    	ol.appendChild(li);
    }
       ol.children[0].className = 'current';
    	
    	//1.动态给ul克隆出第0张图片补到末尾，以实现自动轮播是无缝的效果，
    	//克隆分深克隆和浅克隆，深克隆克隆带标签内的所有内容，浅克隆只克隆外部标签，深克隆参数为true
    	ul.appendChild(ul.children[0].cloneNode(true));
    	//2.基本动画，ol的li
    	var olLis = ol.children;
    	for(var i=0;i<olLis.length;i++){
    		olLis[i].onmouseover = function(){
    			//3.排它原理实现li的背景样式控制
    		for(var j=0;j<olLis.length;j++){
    			olLis[j].className = '';
    		}
    		this.className = 'current';
    		//4.实现图片点击切换效果
    		  var index = -690*parseInt(this.getAttribute('index'));
    		animate(ul,index,20,10);
    		key = this.getAttribute('index');
    		square = key;
    	}
    	}
    	//5自动轮播
    	var timer = null;
    	var key = 0; //记录自动轮播到的图片序号
    	var square = 0;//记录自动轮播到的图所对应的li;
    	timer = setInterval(autoPlay,1500);//两秒自动切换
    	function autoPlay(){
    		key++;
    		square++;
    		if(square >= olLis.length){
    			square = 0;
    		}
    		if(key > olLis.length){
    			ul.style.left = 0 + 'px';//瞬间把ul定位回0的位置不让他做回拉动画，
    			key = 1;//这里不能是0如果是0，
    		}
    		animate(ul,-690*key,20,10);
    		for(var i=0;i<olLis.length;i++){
              olLis[i].className = '';
    		}
    		olLis[square].className = 'current';
    	}
    	box.onmouseover = function(){
    		clearInterval(timer);
    	}
    	box.onmouseout = function(){
    		timer = setInterval(autoPlay,1500);
    	}
   }